<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>在网上冲浪时看到的案例</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    li {
      list-style: none;
    }
    .title {
      margin: 0 auto;
      width: 400px;
      height: 100px;
      border: 1px solid pink;
      text-align: center;
      line-height: 100px;
      margin-bottom: 10px;
    }
    .title h2 {
      color: brown;
    }
    .ball {
      /* display: flex; */
      margin: 0 auto;
      width: 600px;
      height: 100px;
      border: 1px solid hotpink;
      /* justify-content: space-between; */
      margin-bottom: 10px;
    }
    .ball ul {
      display: flex;
      justify-content: space-between;
    }
    .ball ul li {
      border: 1px solid black;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      /* align-items: center; */
      text-align: center;
      line-height: 80px;
    }
    /* #ball1,
    #ball2,
    #ball3,
    #ball4,
    #ball5,
    #ball6,
    #ball7 {
      border: 1px solid black;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      align-items: center;
    } */

    .btn {
      /* margin: 0 atuo; */
      text-align: center;
      margin-bottom: 10px;
      width: 80px;
      height: 38px;
      border: 1px solid black;
      border-radius: 20px;
      line-height: 35px;
      background-color: rgb(131, 6, 6);
    }
    .btn button {
      border: 0;
      background-color: rgb(131, 6, 6);
      color: beige;
    }
    .reward {
      margin: 0 auto;
      width: 400px;
      height: 100px;
      border: 1px solid red;
      line-height: 100px;
      font-size: 24px;
    }
    .red {
      background-color: red;
    }
    .blue {
      background-color: blue;
    }
  </style>
  <body>
    <!-- 标题区域 -->
    <div class="title">
      <h2>本期双色球开奖号码</h2>
    </div>
    <!-- 球展示区域 -->
    <div class="ball">
      <!-- <div id="ball1">1234564</div>
      <div id="ball2">2</div>
      <div id="ball3">3</div>
      <div id="ball4">4</div>
      <div id="ball5">5</div>
      <div id="ball6">6</div>
      <div id="ball7">7</div> -->
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- 按钮区域 -->
    <div class="btn">
      <button class="start">开始摇号</button>
      <!-- <button class="stop">停止</button> -->
    </div>

    <!-- 球号码展示区域 -->
    <div class="reward">开奖号码是：</div>

    <!-- <div class="btn1">
      <button>123</button>
    </div> -->
    <script>
      /**
       *
       * 红色或者蓝色球最少数量为1~2，二者随机
       * 点击按钮
       * 球和数字同步变化
       **/

      // 获取元素
      const startBtn = document.querySelector(".btn .start");
      const lis = document.querySelectorAll("ul li");

      // 为按钮添加点击事件
      startBtn.addEventListener("click", () => {
        // alert(111);
        // console.log(lis.length);
        let timeId = setInterval(()=>{
          
        },100)
        setTimeout(() => {
            clearInterval(timeId)
        },3000)
        for (let i = 0; i < lis.length; i++) {
          lis[i].innerHTML = i;
          lis[i].className = "red";
        }
        
      });

      // setInterval() setTimeout()

      // 随机数函数 红1~33 蓝1~16 个数1~2
      function randomNum(startNum, endNum) {
        // floor()向下取整 ceil()向上取整 random() 0~1包含0不包含1
        return Math.floor(Math.random() * (endNum - startNum + 1) + 1);
      }
      //   let num = randomNum(1, 16);
      //   console.log(num);

      //   function test(a, b) {
      //     return Math.floor(Math.random() * (b - a + 1) + 1);
      //   }
      //   console.log(test(1, 16));
    </script>
  </body>
</html>
